<template>
    <el-aside :width="store.isCollapse? '200px':'64px'">
        <!-- <h1>我是侧边栏</h1> -->
        <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#f0f0f0"
            :collapse="!store.isCollapse" :collapse-transition="false">
            <h3 v-show="store.isCollapse">后台管理</h3>
            <h3 v-show="!store.isCollapse">后台</h3>
            <el-sub-menu :index="item.label" v-for="item in hasChildren()" :key="item.path">
                <template #title>
                    <!-- 图标 -->
                    <component class=icons :is="item.icon"></component>
                    <span>{{item.label}}</span>
                </template>

                <el-menu-item-group title="Group One">
                    <el-menu-item :index="subIndex" v-for="(subItem,subIndex) in item.children" :key="subIndex"
                        @click="clickMenu(subItem)">
                        <!-- 图标 -->
                        <component class=icons :is="subItem.icon"></component>
                        <span>{{ subItem.label }}</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item v-for="item in noChildren()" :index="item.path" :key="item.path" @click="clickMenu(item)">
                <!-- !!!这里需要注意一下，没学过！ -->
                <!-- 图标 -->
                <component class=icons :is="item.icon"></component>
                <span>{{item.label}}</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script setup lang="ts">
import { mainStore } from '../store/index'
import { useRouter } from 'vue-router'

const store = mainStore()
const router = useRouter()

const list = [
    {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
        url: 'UserManage/UserManage'
    },
    {
        path: '/other',
        label: '其他',
        icon: 'location',
        children: [
            {
                path: '/page1',
                name: 'page1',
                label: '页面1',
                icon: 'setting',
                url: 'Other/PageOne'
            },
            {
                path: '/page2',
                name: 'page2',
                label: '页面2',
                icon: 'setting',
                url: 'Other/PageTwo'
            }
        ]
    }
]

// vue3中采用方法来过滤东西,这里需要做优化！！！！！！
const noChildren = () => {
    return list.filter((item) => !item.children)
}

const hasChildren = () => {
    return list.filter((item) => item.children)
}

const clickMenu = (item: any) => {
    router.push({
        name: item.name,
    });
    store.selectMenu(item)
}
</script>

<style scoped lang="less">
.icons {
    height: 20px;
    width: 20px;
}

.el-aside {
    height: 100%;
}

.el-menu {
    border-right: none;

    h3 {
        line-height: 48px;
        text-align: center;
        color: #f0f0f0;
    }
}
</style>